import React, { useState } from 'react';
import { Card, Table, Tag, Input, Select, Button, Space, Typography } from 'antd';
import { SearchOutlined, FilterOutlined } from '@ant-design/icons';

const { Title } = Typography;
const { Option } = Select;

// 模拟数据
const questions = [
  {
    id: 1,
    title: '请详细解释React的生命周期',
    category: '前端开发',
    difficulty: '中等',
    tags: ['React', 'Web开发', '框架'],
    frequency: 85
  },
  {
    id: 2,
    title: '什么是微服务架构？它的优势和劣势是什么？',
    category: '后端开发',
    difficulty: '困难',
    tags: ['架构设计', '微服务', '分布式'],
    frequency: 92
  },
  {
    id: 3,
    title: '简述快速排序的实现原理及其时间复杂度',
    category: '算法',
    difficulty: '中等',
    tags: ['排序算法', '分治法'],
    frequency: 78
  },
  {
    id: 4,
    title: '深度学习中过拟合的原因及解决方案',
    category: '人工智能',
    difficulty: '困难',
    tags: ['深度学习', '机器学习', '模型优化'],
    frequency: 88
  },
  {
    id: 5,
    title: 'Docker容器与虚拟机的区别是什么？',
    category: '运维',
    difficulty: '简单',
    tags: ['Docker', '容器化', '虚拟化'],
    frequency: 95
  }
];

const categories = ['全部', '前端开发', '后端开发', '算法', '人工智能', '运维', '数据库'];
const difficulties = ['全部', '简单', '中等', '困难'];

export default function QuestionBank() {
  const [searchText, setSearchText] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('全部');
  const [selectedDifficulty, setSelectedDifficulty] = useState('全部');

  const columns = [
    {
      title: '题目',
      dataIndex: 'title',
      key: 'title',
      width: '40%',
    },
    {
      title: '分类',
      dataIndex: 'category',
      key: 'category',
      width: '15%',
      render: (text) => (
        <Tag color="blue">{text}</Tag>
      )
    },
    {
      title: '难度',
      dataIndex: 'difficulty',
      key: 'difficulty',
      width: '10%',
      render: (text) => {
        const colors = {
          '简单': 'success',
          '中等': 'warning',
          '困难': 'error'
        };
        return <Tag color={colors[text]}>{text}</Tag>;
      }
    },
    {
      title: '标签',
      dataIndex: 'tags',
      key: 'tags',
      width: '20%',
      render: (tags) => (
        <>
          {tags.map(tag => (
            <Tag key={tag}>{tag}</Tag>
          ))}
        </>
      )
    },
    {
      title: '出现频率',
      dataIndex: 'frequency',
      key: 'frequency',
      width: '15%',
      render: (value) => `${value}%`,
      sorter: (a, b) => a.frequency - b.frequency
    }
  ];

  const filteredQuestions = questions.filter(question => {
    const matchesSearch = question.title.toLowerCase().includes(searchText.toLowerCase());
    const matchesCategory = selectedCategory === '全部' || question.category === selectedCategory;
    const matchesDifficulty = selectedDifficulty === '全部' || question.difficulty === selectedDifficulty;
    return matchesSearch && matchesCategory && matchesDifficulty;
  });

  return (
    <div>
      <Card>
        <div style={{ marginBottom: 24 }}>
          <Title level={4}>面试题库</Title>
        </div>
        
        {/* 搜索和筛选区 */}
        <Space style={{ marginBottom: 24 }} size="middle">
          <Input
            placeholder="搜索题目"
            prefix={<SearchOutlined />}
            style={{ width: 300 }}
            value={searchText}
            onChange={e => setSearchText(e.target.value)}
          />
          <Select
            style={{ width: 150 }}
            value={selectedCategory}
            onChange={value => setSelectedCategory(value)}
          >
            {categories.map(category => (
              <Option key={category} value={category}>{category}</Option>
            ))}
          </Select>
          <Select
            style={{ width: 120 }}
            value={selectedDifficulty}
            onChange={value => setSelectedDifficulty(value)}
          >
            {difficulties.map(difficulty => (
              <Option key={difficulty} value={difficulty}>{difficulty}</Option>
            ))}
          </Select>
          <Button type="primary" icon={<FilterOutlined />}>
            筛选
          </Button>
        </Space>

        {/* 题目列表 */}
        <Table
          columns={columns}
          dataSource={filteredQuestions}
          rowKey="id"
          pagination={{
            pageSize: 10,
            showTotal: (total) => `共 ${total} 道题目`
          }}
        />
      </Card>
    </div>
  );
} 